那我們就來繼續昨天對話內容的CSS部分

.chat_message{
    padding: 10px 20px;
    overflow-y:scroll;
    width: 100%;
}

我先將對話的位置稍微離邊框一點距離~
再來就是一個聊天室很重要的東西，
就是scrollbar(卷軸)，
平常看網頁右邊能往上往下拉的

• CSS overflow
  這屬性用來定義元素超過某個範圍的時候該如何呈現，
  例如圖片超過預設區域的大小、文字長度超出原本的範圍等，
  這時候你可以透過 CSS overflow 屬性，
  來制定該區塊是否顯示 scrollbar（卷軸）或者是否要隱藏該元素。
  overflow 常見的值
  overflow: auto;　//預設會自動使用捲軸
  overflow:visible;　 //顯示的文字或圖片會直接超出範圍，不使用捲軸。
  overflow:hidden;　//自動隱藏超出的文字或圖片。
  overflow:scroll;　//自動產生捲軸。
  overflow:inherit;　//繼承自父元素的可見性

那我們因為只需要垂直的scrollbar，
所以使用的是overflow-y

那我們能看到除了字的位置改變之外，
聊天室右邊也多了scrollbar。